<template>
  <div>
    <el-row type="flex" class="content" style="padding:0 20px">
      <el-col :span="4" style="margin:10px 4px" v-for="(work,index)  in page.list" :key="index">
        <el-card :body-style="{ padding: '0px' } " shadow="hover">
          <nuxt-link class="info" :to="'/work/'+work.id">
            <img :src="work.coverImage" class="image" />
          </nuxt-link>
          <div style="padding: 14px;">
            <span>{{work.title}}</span>
            <span :class="(work.score)>90?'scope_01':'scope_02'">{{work.score/10}}</span>
            <div class="bottom clearfix">
              <el-tag
                size="mini"
                type="info"
                style="margin-right:2px"
                v-for="(x,index2) in work.tagList"
                :key="index2"
              >{{x.udxName}}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          @current-change="currentChange"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["page", "url"],
  data() {
    return {
      currentDate: new Date(),
     
    };
  },
  filters: {
    dateFormart(date, fmt) {
      var y = date.getFullYear();

      var m = date.getMonth() + 1;

      m = m < 10 ? "0" + m : m;

      var d = date.getDate();

      d = d < 10 ? "0" + d : d;

      var h = date.getHours();

      h = h < 10 ? "0" + h : h;

      var minute = date.getMinutes();

      minute = minute < 10 ? "0" + minute : minute;

      var second = date.getSeconds();

      second = second < 10 ? "0" + second : second;

      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  methods: {
    async currentChange(index) {
      let { status, data } = await this.$axios.get(
        this.url + "&page=" + index + "&size=30"
      );

      this.page = data;
    }
  }
};
</script>

<style scoped >
.page {
  display: flex;
  justify-content: flex-end !important;
  padding: 0 40px;
}
.info {
  color: #999;
  text-decoration: none;
}
.scope_01 {
  color: #e1251b;
}
.scope_02 {
  color: #ff9a6a;
}
.el-row {
  padding: 2px 0px;
}

.more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.more a {
  color: #e1251b;
  text-decoration: none;
}
.content {
  padding: 40px 10px;
}
.el-col {
  display: flex;
  justify-content: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>

